<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName" /><br />
  名：<input type="text" v-model="person.lastName" /><br />
  姓名：<input type="text" v-model="person.fullName" />
  <!-- <h2>姓名:{{ person.fullName }}</h2> -->
</template>

<script>
import { reactive, computed } from "vue";
export default {
  name: "App",
  /* computed: {
    fullName() {
      return this.person.firstName + "-" + this.person.lastName;
    },
  }, */
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });

    // 计算属性——简写（没有考虑计算属性被修改的情况）
    /* person.fullName = computed(() => {
      return person.firstName + "-" + person.lastName;
    }); */

    // 计算属性——完整写法
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        person.firstName = value.split("-")[0];
        person.lastName = value.split("-")[1];
      },
    });

    /* function getFullName() {
      return firstName + lastName;
    } */

    return {
      person,
      // fullName,
    };
  },
};
</script>
